<template>
  <div>
    <el-dialog title="关联属性" :visible.sync="dialogVisible" width="30%">

      <el-dialog title="选择属性" :visible.sync="innerVisible" width="40%"  append-to-body>
        <!-- append-to-body ==	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
         -->
        <el-table :data="unbindAttrs" style="width: 100%;" @selection-change="innerSelectionChangeHandle">
          <el-table-column type="selection" header-align="center" align="center"></el-table-column>
          <el-table-column prop="attrId" header-align="center" align="center" label="属性id"></el-table-column>
          <el-table-column prop="attrName" header-align="center" align="center" label="属性名"></el-table-column>
          <!-- <el-table-column prop="icon" header-align="center" align="center" label="属性图标"></el-table-column> -->
          <el-table-column prop="valueSelect" header-align="center" align="center" label="可选值列表"></el-table-column>
        </el-table>

        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAddRealtion">确认新增</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="addRelation">新建关联</el-button>
          <el-button
            type="danger"
            @click="batchDeleteRelation"
            :disabled="dataListSelections.length <= 0"
          >批量删除</el-button>

          <el-table :data="relationAttrs" style="width: 100%" @selection-change="handleSelectionChange">

            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>

            <el-table-column
              prop="attrName"
              label="属性名称"
              header-align="center"
              align="center"
              width="180">
            </el-table-column>

            <el-table-column
              prop="valueSelect"
              label="属性值"
              header-align="center"
              align="center"
              width="180">
              <template slot-scope="scope">
                <el-tooltip placement="top">
                  <div slot="content">
                    <span v-for="(i,index) in scope.row.valueSelect.split(',')" :key="index">{{i}}<br/></span>
                  </div>
                  <el-tag>{{scope.row.valueSelect.split(",")[0]+" "}}</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>

            <el-table-column prop="address" label="操作" header-align="center" align="center"> 
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="relationRemove(scope.row.attrId)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true,
      innerVisible: false,
      relationAttrs:[], //分组关联的属性
      unbindAttrs:[], //分组未关联的属性
      groupId:0, 
      dataListSelections:[],      //关联结果 - 表格选中
      innerdataListSelections: [] //新增关联 - 表格选中
    };
  },
  methods: {
    init(id) {
      console.log("初始化 --- ", id);
      
      this.dialogVisible = true;
      this.groupId = id || 0;
      this.$http({
        url: this.$http.adornUrl("/product/attr/getBindByGroupId"),
        method: "get",
        params: this.$http.adornParams({
          groupId: this.groupId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.relationAttrs = data.data;
        }
      });
    },
    //移除关联属性
    relationRemove(attrId){
      console.log("移除属性:",attrId);
      

      this.$http({
        url: this.$http.adornUrl("/product/attrgroup/deleteRelation"),
        method: "delete",
        params: this.$http.adornParams({
          attrGroupId: this.groupId,
          attrId: attrId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({ type: "success", message: "删除成功" });
          this.init(this.groupId);
        } else {
          this.$message({ type: "error", message: data.msg });
        }
      });
    },
    //新增关联关系 - 查询未绑定的属性
    addRelation(){
      this.innerVisible = true;
      this.$http({
        url: this.$http.adornUrl("/product/attr/getUnbindByGroupId"),
        method: "get",
        params: this.$http.adornParams({
          groupId: this.groupId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.unbindAttrs = data.data;
        }
      });
    },
    batchDeleteRelation(){

    },
    //关联属性 - 表格选中事件
    handleSelectionChange(val) {
      //console.log("表格选中值:",val);
      this.dataListSelections = val;
    },
    //新建关联 - 表格选中事件
    innerSelectionChangeHandle(val){
      this.innerdataListSelections = val;
    },
    //绑定属性
    submitAddRealtion(){
      console.log("bind data:",this.innerdataListSelections);

      let add = this.innerdataListSelections
        .map(sel => ({attrId:sel.attrId, attrGroupId : this.groupId}));
      
      this.$http({
        url: this.$http.adornUrl("/product/attrgroup/addRelation"),
        method: "post",
        data: this.$http.adornData(add,false)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({ type: "success", message: "新增关联成功" });
          this.innerVisible = false;
          this.init(this.groupId);
        }

        
      });

    }
  },
};
</script>

<style>
</style>